<template>
    <div>
        <!-- 角色管理 -->
        <Add @show="show"></Add>
        <Update @show="show"></Update>
        <List :data="roles" @show="show"></List>
        <Pagination :pagination="pagination" @show="show"></Pagination>
        <RoleToFunction></RoleToFunction>
    </div>
</template>
<script setup>
import Add from './modules/Add.vue';
import List from './modules/List.vue';
import Update from './modules/Update.vue';
import RoleToFunction from './modules/RoleToFunction.vue';
import Pagination from '@/components/Pagination.vue';
import {onMounted, ref} from 'vue';
import { listRole } from '../../services/role';
const roles = ref([]);
const pagination = ref({});

async function show(current = 1,pageSize = 5){
    let res = await listRole(current,pageSize);
    
    roles.value = res.data.list;
    pagination.value = res.data;
}
onMounted(() => {
    show();
})
</script>